sass map
#sass 3.3から追加
sassで使える連想配列のこと
code:scss
$map: (
hoge: 1px,
fuga: yellow,
aaa: aaaaaaa
);
変数として扱うので、$始まり、コロン代入
js等とは違って()括弧に注意
cssと違って;区切りではなく,区切りなのに注意
mixinやfunctionに大量の変数を渡すのはプログラミング的にbadパターンなので、把握しきれない個数になったらmapにしよう
map-getで値をとれる
sassのmapを操作する関数
また、mapの中身はeachで回せる
code:scss
$page-color: (
'pageA': #0ff,
'pageB': #f0f,
'pageC': #ff0,
'pageD': #000,
'pageE': #fff
);
@each $page, $color in $page-color {
.#{$page}-bg {
background-color: $color;
}
}